<template>
  <div class="about">
    <div class="logo-gallary">
      <img src="/logo.png" />
      <img src="/qiankun.png" />
    </div>

    <p>
      qiankun 是一个基于 single-spa
      的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。
    </p>
    <h4>1.安装依赖</h4>
    <pre>
      $ yarn add qiankun # 或者 npm i qiankun -S
    </pre>
    <h4>2.注册微应用并启动</h4>
    <pre>
      import { registerMicroApps, start } from 'qiankun';
      registerMicroApps([
        {
          name: 'reactApp',
          entry: '//localhost:3000',
          container: '#container',
          activeRule: '/app-react',
        },
        {
          name: 'vueApp',
          entry: '//localhost:8080',
          container: '#container',
          activeRule: '/app-vue',
        },
        {
          name: 'angularApp',
          entry: '//localhost:4200',
          container: '#container',
          activeRule: '/app-angular',
        },
      ]);
      // 启动 qiankun
      start();
    </pre>
    <h4>3. Vue 微应用</h4>
    <h5>3.1 新增 (src/public-path.js)文件</h5>
    <pre>
      if (window.__POWERED_BY_QIANKUN__) {
        __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
      }
    </pre>
    <h5>3.2 修改 (main.js)</h5>
    <pre>
      import './public-path';
      import Vue from 'vue';
      import VueRouter from 'vue-router';
      import App from './App.vue';
      import routes from './router';
      import store from './store';

      Vue.config.productionTip = false;

      let router = null;
      let instance = null;
      function render(props = {}) {
        const { container } = props;
        router = new VueRouter({
          base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
          mode: 'history',
          routes,
        });

        instance = new Vue({
          router,
          store,
          render: (h) => h(App),
        }).$mount(container ? container.querySelector('#app') : '#app');
      }

      // 独立运行时
      if (!window.__POWERED_BY_QIANKUN__) {
        render();
      }

      export async function bootstrap() {
        console.log('[vue] vue app bootstraped');
      }
      export async function mount(props) {
        console.log('[vue] props from main framework', props);
        render(props);
      }
      export async function unmount() {
        instance.$destroy();
        instance.$el.innerHTML = '';
        instance = null;
        router = null;
      }
    </pre>
    <h5>3.3 打包配置修改 (vue.config.js)</h5>
    <pre>
      const { name } = require('./package');
      module.exports = {
        devServer: {
          headers: {
            'Access-Control-Allow-Origin': '*',
          },
        },
        configureWebpack: {
          output: {
            library: `${name}-[name]`,
            libraryTarget: 'umd', // 把微应用打包成 umd 库格式
            jsonpFunction: `webpackJsonp_${name}`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal
          },
        },
      };
    </pre>
    <hr />
    <ol>
      <li>
        <a href="https://juejin.cn/post/7486465253816991780"
          >[微前端][vue3 + vite + qiankun] 使用详解</a
        >
      </li>
      <li>
        <a href="https://zxiaosi.com/archives/e1569209.html"
          >Qiankun + Vite 实现微前端</a
        >
      </li>
    </ol>
  </div>
</template>

<style scoped>
.about {
  color: #666;
  line-height: 24px;
  font-size: 14px;
  font-weight: 400;
  margin: 0 12px;
}

.logo-gallary {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 0;
  width: 100%;
}

.logo-gallary img {
  height: 160px;
  margin: 0 20px;
}
</style>
